<template>
  <div class="app-container">
    <el-row>
      <div class="action">
        <div class="chart-filter">
          <div class="filter-right">
            <label>公众号：</label>
            <el-input type="text"  size="medium " v-model="listQuery.publicName" class="w-200"  placeholder="请输入公众号名称"></el-input>
            <label>门店：</label>
            <el-input type="text"  size="medium " v-model="listQuery.shopName" class="w-200"  placeholder="请输入门店名称"></el-input>
            <label>订单状态：</label>
            <el-button type="info" class="btn-query" size="small" @click = 'handleFilter'>查询</el-button>
            <el-button type="info" class="btn-add" size="small" @click = 'handleAddWxinfo'>新增公众号</el-button>
          </div>

        </div>
        <el-table :data="list"  element-loading-text="Loading" :header-cell-style="{ backgroundColor:'#f5f6f6' }"  fit highlight-current-row>
          <el-table-column label='公众号' align="center">
            <template slot-scope="scope">
              {{scope.row.Fpublic_name}}
            </template>
          </el-table-column>
          <el-table-column label="门店" align="center">
            <template slot-scope="scope">
              {{scope.row.Fshop_name}}
            </template>
          </el-table-column>
          <el-table-column label="绑定时间" align="center">
            <template slot-scope="scope">
              {{scope.row.Fcreatetime}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <router-link class="link-type" :to="'/authorize'">
                <a href="javascript:;" >去更新</a>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
  import ajax from '@/utils/ajax'
  export default {
    name: 'wxinfo',
    data() {
      return {
        wxinfoOptions: [],
        shopOptions: [],
        list: [],
        total: null,
        listLoading: true,
        listQuery: {
          publicName: '',
          shopName: '',
          page: 1,
          pageSize: 20
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      getList() {
        const self = this
        ajax.getData(process.env.BASE_API + '/users/offacc', this.listQuery).then(function(res) {
          if (res.errCode === 0) {
            self.list = res.data.data
            self.total = res.data.total
          }
        })
      },
      handleFilter() {
        this.getList()
      },
      handleAddWxinfo() {
        this.$router.push({ path: '/authorize' })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .w-200{
    width: 200px!important;
  }
</style>
